<!-- 提示信息 -->
<app-tip [type]="'error'"></app-tip>

<div class="header">
  <div class="left">
    <div [routerLink]="['/main/table/table-list']">
      <i class="fa fa-angle-left" aria-hidden="true" style="font-size: 1.5em;">
        <span style="font-size: .8em;margin-left: 5px;">返回</span>
      </i>
    </div>
  </div>
  <div class="center">订单详情</div>
  <div class="right" style="background: #333"></div>
</div>
<div class="foot-list" style="margin-top: 4em;">
  <div class="set-box">
    <div class="set-head" style="margin-bottom: 0.5em" (click)="changeFood()">
      <div class="left"><i class="fa fa-cutlery" aria-hidden="true" style="color: #f39801"></i> 菜品设置</div>
      <div class="right"><i class="fa fa-angle-down fa-3" aria-hidden="true" *ngIf="foodSet"></i><i
        class="fa fa-angle-right" aria-hidden="true" *ngIf="!foodSet"></i></div>
    </div>
    <div class="set-item" *ngIf="foodSet">
      <div class="set-item-p" [routerLink]="['/main/index']"
           [queryParams]="{addOrderId: orderId}">
        <div class="left">加菜</div>
        <div class="right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
  </div>

      <div class="set-item-p" [routerLink]="['/main/order/order-recall']" [queryParams]="{orderId: orderId}">
        <div class="left">退菜</div>
        <div class="right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
      </div>
    </div>
  </div>
  <div class="set-box" style="margin-bottom: 0.5em;">
    <div class="set-head" style="margin-bottom: 0.5em" (click)="changTable()">
      <div class="left"><i class="fa fa-th-large" aria-hidden="true" style="color: #f39801"></i> 餐桌设置</div>
      <div class="right"><i class="fa fa-angle-down" aria-hidden="true" *ngIf="tableSet"></i><i
        class="fa fa-angle-right" aria-hidden="true" *ngIf="!tableSet"></i></div>
    </div>
    <div class="set-item" *ngIf="tableSet">
      <div class="set-item-p" [routerLink]="['/main/order/change-table-settings']"
           [queryParams]="{tid: tid, tableClass: tableClass, tableName:tableName, orderId: orderId,orderNum: orderNum}">
        <div class="left">换台</div>
        <div class="right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
      </div>

      <div class="set-item-p" [routerLink]="['/main/order/combine-table-settings']"
           [queryParams]="{tid: tid, tableClass: tableClass, tableName:tableName, orderId: orderId, orderNum: orderNum}">
        <div class="left">并台</div>
        <div class="right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
      </div>
    </div>
  </div>

  <div class="set-box" style="margin-bottom: 1em;" [routerLink]="['/main/order/order-record']" [queryParams]="{orderId: orderId, tid: tid}">
    <div class="set-head" style="margin-bottom: 0.5em">
      <div class="left"><i class="fa fa-list-ul" aria-hidden="true" style="color: #f39801"></i> 操作记录</div>
      <div class="right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
    </div>
  </div>

  <div class="title">
    <span style="float: left;padding-left: 1.2em;">已点菜品</span> <span
    style="float: right;padding-right: 1.2em;"><span>x</span> {{countNumber}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{countPrice | price}}</span>
  </div>


  <div class="food-item1" *ngFor="let v of orderList">
    <div class="food-item1-top">
      <div class="left"><img src="{{v.figure_url}}?x-oss-process=image/resize,w_110,h_80" alt=""></div>
      <div class="center">
        <div class="title-name">{{v.food_name}}</div>
        <div class="num">数量：{{v.num}}&nbsp;&nbsp;<span style="color: #dd514c">单价：￥{{v.price | price}}</span></div>
      </div>
      <div class="right" style="width: 5em;">
        <div class="price" style="position: relative"><span
          style="position: absolute;right: 10px;top:2.7em;color: #f39801;font-size: 1.1em;font-weight: 600">￥{{v.total_price | price}}</span>
        </div>
      </div>
    </div>
    <div class="desc" *ngIf="v.practice"><span style="color: #666;">规格：</span>{{v.practice}}</div>
  </div>
</div>
